<template>
    <a-drawer
            :visible="formVisible"
            :width="500"
            unmount-on-close
            :title="isEdit ? '编辑' : '新增'"
            @ok="submit"
            @cancel="handleCancel"
    >
        <div>
            <a-form
                    ref="formRef"
                    :model="form"
                    :label-col-props="{ span: 8 }"
                    :wrapper-col-props="{ span: 16 }"

            >

                <a-form-item  v-for="item in partData" :field="item.name" :label="item.name">
                    <a-input v-model="partDataInfo[item.id]" placeholder="请输入数量" />
                </a-form-item>

            </a-form>
        </div>
    </a-drawer>
</template>

<script lang="ts" setup>
    import { ref, watch, computed ,defineProps } from 'vue';
    import { FieldRule, Message } from '@arco-design/web-vue';
    import {addPartInfo} from "@/api/part";
    import {
        addProductionInfo,
        contentTypeOptionsCatCircuitVersion,
        contentTypeOptionsCatPlateVersion
    } from "@/api/production";
    import {addPlateModuleInfo} from "@/api/platemodule";
    import {addModulePart, queryPartList} from "@/api/platemodulepart";


    const props = defineProps({
        visible: {
            type: Boolean,
            default: false,
        },
        selected: {
            type: Number,
            default: 1,
        },
        refreshList: {
            type: Boolean,
            default: false,
        },
        formData: {
            type: Object,
            default: () => {
                return {};
            },
        },
    });

    const formRef = ref();//声明才能绑定，  ref="formRef"相当于一个标识可以调用或者检验form的内容

    // 初始数据
    const initData = () => {
        return {
            name: 'eeeeeeee',
        };
    };
    /**
     * 菜单数据
     */
    const form = ref(props.formData);
console.log(form);
    const selected = ref(props.selected);
    console.log(selected)

    let partData=[];
    const PartInfo = async () => {
      const {data} = await queryPartList();
        partData=data.data;
console.log(data.data)
    };
    PartInfo();
    let partDataInfo=[];





    const emit = defineEmits<{
        (e: 'update:visible', v: boolean): void;
        (e: 'refresh'): void;
    }>();
    const formVisible = ref(false);




    // 判断是编辑还是新增
    console.log(form.value.id);
    const isEdit = computed(() => !!form.value.id);
    console.log(isEdit);



    const contentTypeOptions1 =  [
        {
            label: 'img',
            value: 'img',
        },
        {
            label: 'horizontalVideo',
            value: 'horizontalVideo',
        },
        {
            label: 'img',
            value: 'verticalVideo',
        },
    ];

    const submit = async () => {
        formVisible.value = true;
        const validate = await formRef.value.validate();
        console.log(formRef.value);
        console.log(validate);

        if (!validate) {
            console.log(isEdit.value);
            if (isEdit.value) {
                console.log(form.value);
             console.log("修改成功 写修改api");
            } else {
                console.log(partDataInfo)
                console.log(form.value);

                const keys = Object.keys(partDataInfo);

                let Data=[];
                for(const key of keys) {
                    let DataInfo={
                        part_id:key,
                        number:partDataInfo[key]
                    };
                    Data.push(DataInfo);
                }
                console.log(Data);
                console.log(selected);
                const data={
                    module_id:selected.value,
                    part_data:Data,
                }
                console.log(data);
                // const data={
                //     plate_id:selected.value,
                // };
                // console.log(data);
                await addModulePart(data).then(()=>{
                    Message.success("添加成功");
                });
                partDataInfo=[];
                console.log("添加成功");
            }
            console.log(initData);
            form.value = { ...initData };
            console.log(form.value);
            formVisible.value = false;
            emit('refresh');
        }
    };

    const handleCancel = () => {
        formVisible.value = false;
        form.value = { ...initData };
    };

    watch(
        () => formVisible.value,
        (val) => {
            emit('update:visible', val);
        }
    );

    watch(
        () => props.visible,
        (val) => {
            formVisible.value = val;
        }
    );

    watch(
        () => props.formData,
        (val) => {
            form.value = val;
        }
    );
    watch(
        () => props.selected,
        (val) => {
            selected.value = val;
        }
    );

</script>
